<template>

    <div class="sales-product-container">
        <h2>商品销售明细表</h2>
        <br>
        <!-- 搜索表单 -->
        <el-form :model="searchForm" label-width="auto" class="sales-product-form">
            <div class="form-row">
                <el-form-item label="有效日期：" prop="dateRange">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="~" start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 390px;" @change="handleDateChange"
                        value-format="YYYY-MM-DD" />
                </el-form-item>

                <el-form-item label="客户：">
                    <el-input v-model="searchForm.customerId" placeholder="点击选择客户" @click="openCustomerDialog" readonly
                        style="width: 200px;" />
                    <CustomerDialog v-model="customerDialogVisible" @confirm="handleSelectCustomer" />
                </el-form-item>

                <el-form-item label="商品：" prop="goods_code">
                    <el-select v-model="searchForm.goods_code" clearable placeholder="请选择" style="width: 200px;">
                        <el-option value="0" label="全部" />
                        <!-- <el-option v-for="goods in goodsList" :key="goods.code" :label="goods.name" :value="goods.code" /> -->
                    </el-select>
                </el-form-item>

                <el-form-item label="销售员：" prop="workName" v-if="roleIds == '2'">
                    <el-input v-model="searchForm.workName" placeholder="业务员" style="width: 160px;" readonly />
                </el-form-item>

                <el-form-item label="销售员：" prop="workName" v-else>
                    <el-select v-model="searchForm.workNumber" placeholder="请选择" clearable style="width: 160px;">
                        <el-option v-for="salesPerson in salesPersonList" :key="salesPerson.id"
                            :label="salesPerson.name" :value="salesPerson.id" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>
            </div>
        </el-form>

        <div style="gap: 12px; float: right; margin-bottom: 16px;">
            <el-button type="primary">导出</el-button>
            <el-button>打印</el-button>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="销售日期" width="180">
                <template #default="scope">
                    {{ formatDate(scope.row.date) }}
                </template>
            </el-table-column>
            <el-table-column prop="salesSlip_code" label="销售订单编号" width="180" />
            <el-table-column prop="workName" label="销售员" width="180" />
            <el-table-column prop="customerName" label="客户" width="180" />
            <el-table-column prop="goods_code" label="商品编号" width="180" />
            <el-table-column prop="quantity" label="销售商品数量" width="180" />
            <!-- <el-table-column prop="type" label="商品类别" width="180" /> -->
            <el-table-column prop="name" label="商品名称" width="180" />
            <el-table-column prop="unit" label="商品单位" width="180" />
            <el-table-column prop="price" label="商品销售单价" width="180" />
            <el-table-column prop="cost" label="小计" />
            <el-table-column prop="warehouse_code" label="出库仓库编号" width="180" />
        </el-table>

        <!-- 分页组件 -->

        <div style="float: right; padding-top: 20px;">
            <el-pagination background layout="prev, pager, next,jumper" :total="pageInfo.total"
                :page-size="pageInfo.pageSize" :current-page="pageInfo.pageNum" @current-change="changePage" />
        </div>
        <div style="clear: both;"></div>
        <CustomerDialog ref="customerDialogRef" :customer-list="customerList" @confirm="handleSelectCustomer" />
    </div>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import CustomerDialog from '@/util/CustomerDialog.vue'

const roleIds = sessionStorage.getItem("roleIds")
const staffName = sessionStorage.getItem("name")

// 客户对话框引用
const customerDialogRef = ref(null)

// 客户对话框启用
const customerDialogVisible = ref(false)
// 打开客户选择弹窗
const openCustomerDialog = () => {
    customerDialogVisible.value = true
}

// 客户选择
const handleSelectCustomer = (customers) => {
    console.log('已选择客户:', customers)
    if (customers && customers.length > 0) {
        const customer = customers[0]
        searchForm.customerId = customer.id
        searchForm.customerCode = customer.code
        searchForm.customerAddress = customer.primaryContactAddress || ''
        searchForm.customerName = customer.name
        searchForm.customerType = customer.typeName

    }
    customerDialogVisible.value = false
}

//单据日期格式化
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

const dateRange = ref([])
// 处理日期变化
const handleDateChange = (val) => {
    if (val && val.length === 2) {
        searchForm.start_date = val[0]
        searchForm.end_date = val[1]
    } else {
        searchForm.start_date = ''
        searchForm.end_date = ''
    }
}

const pageInfo = reactive({
    total: 0,
    pageSize: 10,
    pageNum: 1,
    pages: 1,
    List: [],
})

const searchForm = reactive({
    workNumber: '',
    customerName: '',
    workName: staffName,
    start_date: '',
    end_date: '',
    goods_code: '',

})

const tableData = ref([])
const handleSearch = async () => {
    const response = await axios.get('/api/sales/salesSlipDetList', {
        params: {
            customerId: searchForm.customerId,
            workName: searchForm.workName,
            workNumber: searchForm.workNumber,
            start_date: searchForm.start_date,
            end_date: searchForm.end_date,
            goods_code: searchForm.goods_code,
            pageNum: pageInfo.pageNum,
            pageSize: pageInfo.pageSize
        }
    })
    if (response.data.code == 200) {
        console.log("121", response.data)
        tableData.value = response.data.salesSlipDetList.list
        pageInfo.total = response.data.total || 0,
            pageInfo.pages = response.data.pages || 1
    } else {
        ElMessage.error(response.data.msg)

    }
}


const changePage = (pageNum) => {
    pageInfo.value.pageNum = pageNum
    handleSearch()
}

onMounted(() => {
    handleSearch()
})

</script>

<style scoped>
.sales-product-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
}

.sales-product-form {
    max-width: 1200px;
}

.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

}


.form-actions {
    margin-top: 20px;
    text-align: center;
}

/* 自定义表单项样式 */
.el-form-item__label {
    font-weight: bold;
    color: #333;
}

.el-form-item__content {
    display: flex;
    align-items: center;
}

/* 输入框和选择框样式 */
.el-input,
.el-select {
    width: 100%;
}

.el-input__inner {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
}

.el-input__inner:focus {
    border-color: #409eff;
    outline: none;
}

/* 开关样式 */
.el-switch {
    margin-left: 10px;
}

/* 响应式设计 */
@media (max-width: 1000px) {
    .form-row {
        flex-direction: column;
    }

    .form-row .el-form-item {
        min-width: 100%;
    }
}
</style>